<template>
  <div
    style="background: #f4f7fd; padding-bottom: 15px"
    class="scorlle-analysis"
    ref="scrollBox"
    @scroll="handleScroll"
  >
    <navTop></navTop>
    <titleTab
      :examtitle="examtitle"
      :classlistbox="classlistbox"
      @classIdDate="classIdDate"
      :className="className"
    ></titleTab>
    <div
      class="contentzw"
      :style="
        screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'
      "
    >
      <div class="contentzwLeft" ref="leftPanel">
        <div :class="{ fixed: isFixed }">
          <span>可拖动调整表格顺序</span>
          <draggable
            v-model="listDraglist"
            :options="{ animation: 200 }"
            @change="onDragEnd"
          >
            <div
              v-for="item in listDraglist"
              :key="item.id"
              :class="['dragli', { hover: item.mark === activeId }]"
              @click="goAnchor(item.id,item.mark)"
            >
              {{ item.mark }}
            </div>
          </draggable>
        </div>
      </div>
      <div class="contentzwRight">
        <div v-for="(item, index) in listDraglist" :key="index">
          <!-- {{item}} -->
          <!-- 作业概览 -->
          <div
            class="homeworkgl marginTope"
            v-if="item.mark === '作业概览'"
            id="zuoyegailan"
          >
            <h3>{{ className }}{{ item.mark }}</h3>
            <div>
              本班<b>{{ item.overviewData.totalCount }}</b
              >人， 扫描<b>{{ item.overviewData.submitCount }}</b
              >人， 缺少<b>{{
                item.overviewData.totalCount - item.overviewData.submitCount
              }}</b
              >人 ，<span @click="notuploadstuentishow = true">缺少名单</span>；
            </div>
            <div>
              全体最高分<b
                >{{ formatNumber(item.overviewData.examHighestScore) }}分</b
              >， 全体平均分<b
                >{{ formatNumber(item.overviewData.examAvgScore) }}分</b
              >， 优秀率<b
                >{{ formatNumber(item.overviewData.examExcellentPercent) }}%</b
              >
              / 及格率<b
                >{{ formatNumber(item.overviewData.examPassPercent) }}%</b
              >
              / 中位数为<b
                >{{ formatNumber(item.overviewData.examMedianScore) }}分</b
              >
              / 标准差为<b>{{
                formatNumber(item.overviewData.examStdDeviation)
              }}</b
              >；
            </div>
            <div>
              {{ className }}最高分<b
                >{{ formatNumber(item.overviewData.highestScore) }}分</b
              >， {{ className }}平均分<b
                >{{ formatNumber(item.overviewData.avgScore) }}分</b
              >， 优秀率<b
                >{{ formatNumber(item.overviewData.excellentPercent) }}%</b
              >
              / 及格率<b>{{ formatNumber(item.overviewData.passPercent) }}%</b>
              / 中位数为<b
                >{{ formatNumber(item.overviewData.medianScore) }}分</b
              >
              / 标准差为<b>{{ formatNumber(item.overviewData.stdDeviation) }}</b
              >；
            </div>
          </div>
          <!-- 作答分布 -->
          <div
            class="answerBox marginTope"
            v-if="item.mark === '作答分布'"
            id="zuodafenbu"
          >
            <div class="subobjquestion">
              <div class="subobjquestionTitle">
                {{ item.mark }}
              </div>
              <div class="rightlset">
                <div>
                  <el-radio-group v-model="subObjquestion" size="mini">
                    <el-radio-button label="1">客观题</el-radio-button>
                    <el-radio-button label="2">主观题</el-radio-button>
                  </el-radio-group>
                </div>
                <span class="exportExcel" @click="objectiveQuestionDerivation"
                  >导出表格</span
                >
              </div>
            </div>
            <div v-for="child in item.overviewData" :key="child.objective">
              <!-- 客观题 -->
              <div v-if="subObjquestion == 1">
                <div v-if="child.objective === '客观题'">
                  <el-table
                    :height="child.kegtlist.length > 11 ? '60vh' : ''"
                    :data="child.kegtlist"
                    border
                    stripe
                    :header-cell-style="{
                      background: '#E8F0FA',
                      color: '#2A303B',
                      fontWeight: '500',
                    }"
                    class="custom-table"
                    tooltip-effect="dark"
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="questionNum"
                      label="试题"
                      align="center"
                    />
                    <el-table-column
                      prop="answer"
                      label="答案"
                      align="center"
                    />
                    <!-- <el-table-column prop="score" label="分值" align="center" /> -->
                    <el-table-column label="平均分/满分" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.avgScore }} / {{ scope.row.score }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="scoreRate"
                      label="班正答率(%)"
                      align="center"
                    />
                    <el-table-column
                      prop="examScoreRate"
                      label="全体正答率(%)"
                      align="center"
                    />
                    <el-table-column
                      prop="fullScoreRate"
                      label="得分率(%)"
                      align="center"
                    />
                    <!-- <el-table-column prop="zeroScoreRate" label="零分率(%)" align="center" /> -->
                    <el-table-column
                      label="作答分布(标红为正确作答)"
                      align="center"
                      width="400"
                    >
                      <template slot-scope="scope">
                        <ul class="studentanswer">
                          <li
                            v-for="(option, index) in scope.row
                              .newstudentAnswer"
                            :key="index"
                            :class="{
                              hover: option.includes(scope.row.answer),
                            }"
                          >
                            {{ option }}
                          </li>
                        </ul>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <!-- 主观题 -->
              <div v-if="subObjquestion == 2">
                <div v-if="child.objective === '主观题'">
                  <el-table
                    :height="child.kegtlist.length > 11 ? '60vh' : ''"
                    :data="child.kegtlist"
                    border
                    stripe
                    :header-cell-style="{
                      background: '#E8F0FA',
                      color: '#2A303B',
                      fontWeight: '500',
                    }"
                    class="custom-table"
                    tooltip-effect="dark"
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="questionNum"
                      label="试题"
                      align="center"
                    />
                    <!-- <el-table-column prop="answer" label="答案" align="center" /> -->
                    <el-table-column label="平均分/满分" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.avgScore }} / {{ scope.row.score }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="scoreRate"
                      label="班得分率(%)"
                      align="center"
                    />
                    <el-table-column
                      prop="examScoreRate"
                      label="全体得分率(%)"
                      align="center"
                    />
                    <el-table-column
                      prop="fullScoreRate"
                      label="满分率(%)"
                      align="center"
                    />
                    <el-table-column
                      prop="zeroScoreRate"
                      label="零分率(%)"
                      align="center"
                    />
                    <el-table-column
                      label="得分分布(标红为占比最多)"
                      align="center"
                      width="500"
                    >
                      <template slot-scope="scope">
                        <ul class="studentanswer">
                          <li
                            v-for="(option, index) in scope.row
                              .newstudentAnswer"
                            :key="index"
                            :class="{
                              hover: isHighestPercentage1(scope.row, option),
                            }"
                          >
                            {{ option }}
                          </li>
                        </ul>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
          <!-- 高频错题 -->
          <div
            v-if="item.mark === '高频错题'"
            class="marginTope"
            id="gaopincuoti"
          >
            <div class="subobjquestion">
              <div class="subobjquestionTitle">
                {{ item.mark }}
              </div>
              <div class="rightlset">
                <div class="screeningScope">
                  筛选范围：
                  <div>
                    <el-input
                      v-model="startRate"
                      @change="startratechange"
                      @input="stratrateinput"
                    ></el-input>
                    <i>-</i>
                    <el-input
                      v-model="endRate"
                      @change="endratechange"
                      @input="endrateinput"
                    ></el-input>
                  </div>
                </div>
                <span @click="derivedExcel" class="exportExcel">导出表格</span>
              </div>
            </div>
            <el-table
              :data="errorQuestions"
              border
              v-loading="loadingErrorQuestions"
              :empty-text="errorQuestionsError || '暂无数据'"
              stripe
              :header-cell-style="{
                background: '#e8f0fa',
                color: '#2A303B',
                fontWeight: '500',
              }"
              class="custom-table"
              tooltip-effect="dark"
              style="width: 100%"
              :height="errorQuestions.length > 11 ? '70vh' : ''"
            >
              <el-table-column
                prop="questionNum"
                label="试题"
                width="90"
                align="center"
              />
              <el-table-column
                prop="questionTypeName"
                label="题型"
                width="90"
                align="center"
              />
              <!-- <el-table-column label="知识点">
                                <template slot-scope="scope">
                                    <Expandable :text="scope.row.knowledge"></Expandable>
                                </template>
                            </el-table-column> -->
              <el-table-column
                prop="scoreRate"
                label="班得分率"
                width="140"
                align="center"
              >
                <template slot-scope="scope">
                  {{ formatNumber(scope.row.scoreRate) }}%
                </template>
              </el-table-column>
              <el-table-column
                prop="examScoreRate"
                label="全体得分率"
                align="center"
              >
                <template slot-scope="scope">
                  {{ formatNumber(scope.row.examScoreRate) }}%
                </template>
              </el-table-column>
              <el-table-column label="正确名单">
                <template slot-scope="scope">
                  <span v-if="scope.row.correctlistname.length === 0">-</span>
                  <Expandable
                    v-else
                    :text="scope.row.correctlistname"
                  ></Expandable>
                </template>
              </el-table-column>
              <el-table-column prop="dimidiatelistname" label="半对名单">
                <template slot-scope="scope">
                  <span v-if="scope.row.dimidiatelistname.length === 0">-</span>
                  <Expandable
                    v-else
                    :text="scope.row.dimidiatelistname"
                  ></Expandable>
                </template>
              </el-table-column>
              <el-table-column prop="errorlistname" label="错误名单">
                <template slot-scope="scope">
                  <span v-if="scope.row.errorlistname.length === 0">-</span>
                  <Expandable
                    v-else
                    :text="scope.row.errorlistname"
                  ></Expandable>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 两分五率 -->
          <div
            v-if="item.mark === '两分五率'"
            class="marginTope"
            id="liangfenwulv"
          >
            <div class="subobjquestion">
              <div class="subobjquestionTitle">{{ item.mark }}</div>
              <div class="rightlset">
                <div>
                  <el-radio-group
                    v-model="twoFiverateradio"
                    size="mini"
                    @input="tubiaolist"
                  >
                    <el-radio-button label="1">表格</el-radio-button>
                    <el-radio-button label="2">图表</el-radio-button>
                  </el-radio-group>
                </div>
                <span class="exportExcel1" @click="setlevelxy"
                  >设置学业水平</span
                >
              </div>
            </div>
            <div v-show="twoFiverateradio == 1">
              <el-table
                :data="item.overviewData"
                border
                stripe
                :header-cell-style="{
                  background: '#E8F0FA',
                  color: '#2A303B',
                  fontWeight: '500',
                }"
                class="custom-table"
                tooltip-effect="dark"
              >
                <el-table-column label="全体/班级" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.type == 0 ? "全体" : "班级" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="highestScore"
                  label="最高分"
                  align="center"
                />
                <el-table-column
                  prop="lowestScore"
                  label="最低分"
                  align="center"
                />
                <el-table-column
                  label="平均分"
                  align="center"
                  prop="totalAvg"
                />
                <el-table-column
                  label="标准差"
                  align="center"
                  prop="totalStd"
                />
                <el-table-column label="满分人数(占比)" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.fullScoreCount }}({{
                      scope.row.fullScoreRate
                    }})
                  </template>
                </el-table-column>
                <el-table-column label="优秀人数(占比)" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.excellentCount }}({{
                      scope.row.excellentRate
                    }})
                  </template>
                </el-table-column>
                <el-table-column label="良好人数(占比)" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.goodCount }}({{ scope.row.goodRate }})
                  </template>
                </el-table-column>
                <el-table-column label="及格人数(占比)" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.passCount }}({{ scope.row.passRate }})
                  </template>
                </el-table-column>
                <el-table-column label="低分人数(占比)" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.lowCount }}({{ scope.row.lowRate }})
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="width: 100%" v-show="twoFiverateradio == 2">
              <ul class="lengthTitle">
                <li>满分占比</li>
                <li>优秀占比</li>
                <li>良好占比</li>
                <li>及格占比</li>
                <li>低分占比</li>
              </ul>
              <div
                :ref="'chartRef' + index"
                style="width: 1190px; height: 300px"
              ></div>
            </div>
          </div>
          <!-- 多维细目表 -->
          <div
            v-if="item.mark === '多维细目表'"
            class="marginTope"
            id="duoweiximubiao"
          >
            <div class="subobjquestion">
              <div class="subobjquestionTitle">
                {{ item.mark }}
              </div>
            </div>
            <div>
              <el-table
                :data="item.overviewData"
                border
                stripe
                :header-cell-style="{
                  background: '#E8F0FA',
                  color: '#2A303B',
                  fontWeight: '500',
                }"
                class="custom-table"
                tooltip-effect="dark"
                style="width: 100%"
                :height="item.overviewData.length > 11 ? '70vh' : ''"
              >
                <el-table-column
                  prop="type"
                  label="题型"
                  align="center"
                  width="120"
                />
                <el-table-column
                  prop="number"
                  label="题号"
                  align="center"
                  width="130"
                />
                <el-table-column
                  prop="score"
                  label="分值"
                  align="center"
                  width="80"
                />
                <el-table-column label="知识点" align="center">
                  <template #default="scope">
                    <span
                      v-if="scope.row.knowledge === '待补充'"
                      class="pending-data"
                    >
                      {{ scope.row.knowledge }}
                    </span>
                    <div class="expandable-cell" style="width: 100%" v-else>
                      <Expandable :text="scope.row.knowledge"></Expandable>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="difficulty"
                  label="难度"
                  align="center"
                  width="100"
                >
                  <template #default="scope">
                    <span
                      class="tabbox"
                      :class="getDifficultyClass(scope.row.difficulty)"
                      >{{ scope.row.difficulty }}</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 未上传名单 -->
    <div class="notuploadStudent" v-if="notuploadstuentishow">
      <div class="notuploadStudentContent">
        <h3>缺少名单</h3>
        <div id="content-to-copy" class="contentset">
          <!-- 优化后的分段显示 -->
          <div class="student-groups">
            <div
              v-for="(classInfo, studentIndex) in unsubmittedList"
              :key="classInfo"
              class="student-row"
            >
              <!-- <span v-for="(student, studentIndex) in group" :key="studentIndex" class="student-name"> -->
              {{ classInfo
              }}<span v-if="studentIndex < unsubmittedList.length - 1">、</span>
              <!-- </span> -->
            </div>
          </div>
        </div>
        <div class="elbuttonbox">
          <!-- <el-button @click="copyDivContentToClipboard('content-to-copy')">复制</el-button> -->
          <el-button type="primary" @click="notuploadstuentishow = false"
            >关闭</el-button
          >
        </div>
      </div>
    </div>
    <!--  -->
    <div class="Generatecomparativeanalysis" v-show="scoreishow">
      <div class="GeneratecomparativeanalysisContent">
        <h3>编辑学业水平</h3>
        <div class="neirongtable">
          <ul>
            <li>名称</li>
            <li>得分率（%）</li>
          </ul>
          <ul v-for="(item, index) in editform" :key="index">
            <li>
              <span
                :class="{
                  spangreen: item.name == '满分',
                  spanpupor: item.name == '优秀',
                  spanblue: item.name == '良好',
                  spanyellow: item.name == '及格',
                  spanred: item.name == '低分',
                }"
                >{{ item.name }}</span
              >
            </li>
            <li>
              <el-input
                v-model="item.startScore"
                @input="updateEndScore(index)"
              ></el-input>
              -
              <el-input v-model="item.endScore"></el-input>
            </li>
          </ul>
        </div>
        <div class="buttonbox">
          <em @click="scoreishow = false">返回</em>
          <em @click="sureadddata">保存</em>
        </div>
      </div>
    </div>
    <el-backtop target=".scorlle-analysis" :right="20" :bottom="30">
      <div
        style="
          height: 100%;
          width: 100%;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
        "
      >
        返回顶部
      </div>
    </el-backtop>
  </div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue";
import titleTab from "../../components/analysis/titleTab.vue";
import { mapGetters } from "vuex";
import { getanalysis, get, postanalysis } from "../../request/api.js";
import * as XLSX from "xlsx";
import Expandable from "@/components/analysis/expandable.vue";
import * as echarts from "echarts";
import draggable from "vuedraggable";
import { encrypt, decrypt } from "../../utils/cryptojs";
export default {
  data() {
    return {
      examtitle: "",
      className: "高一1班",
      tabName: ["作业概览", "作答分布", "高频错题", "两分五率", "多维细目表"],
      classlistbox: [],
      subObjquestion: "1",
      objectiveAnswerData: [],
      subjectiveAnswerData: [],
      loadingObjectiveQuestions: false,
      loadingSubjectiveQuestions: false,
      loadingErrorQuestions: false,
      errorQuestions: [],
      errorQuestionRate: 40,
      errorQuestionsError: "",
      startRate: "0%",
      endRate: "40%",
      rate: "1",
      scoreRateData: [],
      examId: "",
      classId: "",
      matrixData: [],
      twoFiverateradio: "1",
      notuploadstuentishow: false,
      listDraglist: [],
      subjectObject: [],
      activeId: "作业概览",
      series: [],
      queryContent: {},
      editform: [
        {
          name: "满分",
          startScore: 100,
          endScore: 100,
        },
        {
          name: "优秀",
          startScore: 85,
          endScore: 100,
        },
        {
          name: "良好",
          startScore: 70,
          endScore: 85,
        },
        {
          name: "及格",
          startScore: 60,
          endScore: 70,
        },
        {
          name: "低分",
          startScore: 0,
          endScore: 60,
        },
      ],
      scoreishow: false,
      className: "",
      unsubmittedList: [],
      isFixed: false, // 是否固定
      offsetTop: 0,
      activeindex:0
    };
  },
  async mounted() {
    // 解密数据数据
    const teacherInfo = decrypt(localStorage.getItem("accessToken"));
    this.teacherInfo = JSON.parse(teacherInfo);
    this.examtitle = this.$route.query.title;
    this.className = this.$route.query.classname;
    this.examId = this.$route.query.examId;
    this.classId = this.$route.query.classId;
    await this.performanceOverview(
      this.$route.query.examId,
      this.$route.query.classId
    ); // 成绩概览
    await this.objectiveQuestion(
      this.$route.query.examId,
      this.$route.query.classId
    ); // 客观题
    await this.subjectiveQuestion(
      this.$route.query.examId,
      this.$route.query.classId
    ); // 主观题
    await this.errorquestion(
      this.$route.query.examId,
      this.$route.query.classId
    ); // 高频错题
    await this.twoFiveRate(
      this.$route.query.examId,
      this.$route.query.classId,
      this.$route.query.gradeid,
      this.$route.query.subjectid
    );
    await this.multidimensionaldetailedlist(
      this.$route.query.examId,
      this.$route.query.classId
    ); // 多维细目表
    this.getOffsetTop(); // 初始计算
    window.addEventListener("scroll", this.handleScroll, { passive: true });
    window.addEventListener("resize", this.getOffsetTop);
    // console.info(this.queryContent)
    // this.getclass(this.$route.query.examId);
    // this.initChart()
  },
  beforeDestroy() {
    this.chart && this.chart.dispose();
    window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("resize", this.getOffsetTop);
  },
  methods: {
    setlevelxy() {
      this.studentLevelxysp();
      this.scoreishow = true;
    },
    //获取设置学业水平
    studentLevelxysp() {
      let obj = {
        teacherId: this.teacherInfo.teacherId,
      };
      getanalysis("api/class/get/specialtyLevel", obj).then((res) => {
        console.info(res, "ressss");
      });
    },
    onDragEnd(evt) {
      // evt.moved 里就是被移动的元素
      if (evt.moved) {
        this.activeId = evt.moved.element.mark;
      }
    },
    formatNumber(num) {
      if (num === undefined || num === null) return "--";
      return Number(num).toFixed(2);
    },
    //成绩概览
    async performanceOverview(examId, classId) {
      this.loadingObjectiveQuestions = true;
      await getanalysis(`api/score/overview/${examId}?classId=${classId}`)
        .then((res) => {
          console.info(res, "res");
          if (res.code == 200) {
            // this.overviewData = res.data;
            this.unsubmittedList = res.data.unsubmittedList;
            let obj = {
              mark: "作业概览",
              overviewData: res.data,
              id: "zuoyegailan",
            };
            this.listDraglist.push(obj);
            this.loadingObjectiveQuestions = false;
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {
          this.loadingObjectiveQuestions = false;
        });
    },
    //作答分布  客观题
    async objectiveQuestion(examId, classId) {
      this.loadingObjectiveQuestions = true;
      await getanalysis(
        `api/score/objective-answer-distribution/${examId}?classId=${classId}`
      )
        .then((res) => {
          if (res.code == 200) {
            this.objectiveAnswerData = res.data.map((item) => ({
              ...item,
              newstudentAnswer: item.studentAnswer
                .split(" ")
                .map((item) => item.trim()),
            }));
            let obj = {
              objective: "客观题",
              kegtlist: this.objectiveAnswerData,
              id: "zuodafenbu",
            };
            this.subjectObject.push(obj);
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {
          this.loadingObjectiveQuestions = false;
        });
    },
    //作答分布  主观题
    async subjectiveQuestion(examId, classId) {
      this.loadingSubjectiveQuestions = true;
      await getanalysis(
        `api/score/subjective-answer-distribution/${examId}?classId=${classId}`
      )
        .then((res) => {
          if (res.code == 200) {
            this.subjectiveAnswerData = res.data.map((item) => ({
              ...item,
              newstudentAnswer: item.studentAnswer
                .split(" ")
                .map((item) => item.trim()),
            }));
            let objs = {
              objective: "主观题",
              kegtlist: this.subjectiveAnswerData,
            };
            this.subjectObject.push(objs);

            let obj = {
              mark: "作答分布",
              overviewData: this.subjectObject,
              id: "zuodafenbu",
            };
            this.listDraglist.push(obj);
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {
          this.loadingSubjectiveQuestions = false;
        });
    },
    isHighestPercentage1(row, option) {
      const options = row.newstudentAnswer;
      // 提取每个选项的百分比
      const percentages = options.map((opt) => {
        const match = opt.match(/\((\d+\.\d+)%\)/);
        return match ? parseFloat(match[1]) : 0;
      });
      // 找出占比最高的选项
      const maxPercentage = Math.max(...percentages);
      // 判断当前选项是否是占比最高的且不是正确答案
      return percentages[options.indexOf(option)] === maxPercentage;
    },
    //导出客观题主观题表格
    objectiveQuestionDerivation() {
      if (this.subObjquestion == 1) {
        const data = [
          [
            "试题",
            "答案",
            "分值",
            "平均分",
            "班正答率(%)",
            "全体正答率(%)",
            "满分率(%)",
            "零分率(%)",
            "学生作答",
          ],
        ];
        this.objectiveAnswerData.map((item) => {
          let arr = [];
          arr.push(item.questionNum);
          arr.push(item.answer);
          arr.push(item.score);
          arr.push(item.avgScore);
          arr.push(item.scoreRate);
          arr.push(item.examScoreRate);
          arr.push(item.fullScoreRate);
          arr.push(item.zeroScoreRate);
          arr.push(item.newstudentAnswer.join(","));
          data.push(arr);
        });
        const colWidths = data[0].map((_, colIndex) => {
          return Math.max(
            ...data.map((row) => {
              const cellValue = row[colIndex] || "";
              return typeof cellValue === "string"
                ? cellValue.toString().length * 1.8 // 中文系数
                : 10; // 默认宽度
            }),
            15 // 最小宽度
          );
        });

        const ws = XLSX.utils.aoa_to_sheet(data);
        ws["!cols"] = colWidths.map((w) => ({ wch: w })); // 设置列宽

        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "客观题作答分布"); // 修正工作表名
        XLSX.writeFile(wb, "客观题作答分布.xlsx"); // 直接导出文件
      } else {
        const data = [
          [
            "试题",
            "分值",
            "平均分",
            "班得分率(%)",
            "全体得分率(%)",
            "满分率(%)",
            "零分率(%)",
            "学生作答",
          ],
        ];
        this.subjectiveAnswerData.map((item) => {
          let arr = [];
          arr.push(item.questionNum);
          arr.push(item.score);
          arr.push(item.avgScore);
          arr.push(item.scoreRate);
          arr.push(item.examScoreRate);
          arr.push(item.fullScoreRate);
          arr.push(item.zeroScoreRate);
          arr.push(item.newstudentAnswer.join(","));
          data.push(arr);
        });
        const colWidths = data[0].map((_, colIndex) => {
          return Math.max(
            ...data.map((row) => {
              const cellValue = row[colIndex] || "";
              return typeof cellValue === "string"
                ? cellValue.toString().length * 1.8 // 中文系数
                : 10; // 默认宽度
            }),
            15 // 最小宽度
          );
        });
        const ws = XLSX.utils.aoa_to_sheet(data);
        ws["!cols"] = colWidths.map((w) => ({ wch: w })); // 设置列宽
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "主观题作答分布"); // 修正工作表名
        XLSX.writeFile(wb, "主观题作答分布.xlsx"); // 直接导出文件
      }
    },
    // 获取班级
    async getclass(id) {
      try {
        const { code, data, message } = await get("/work/class", {
          examId: id,
        });
        if (code !== 200) {
          this.$message.error(message);
          return;
        }

        this.classlistbox = data;
        const { classId, gradeId } = data[0];
        this.classId = classId;
        // 顺序执行
        await this.performanceOverview(id, classId); // 成绩概览
        await this.objectiveQuestion(id, classId); // 客观题
        await this.subjectiveQuestion(id, classId); // 主观题
        await this.errorquestion(id, classId); // 高频错题
        await this.twoFiveRate(
          id,
          classId,
          gradeId,
          this.$route.query.subjectId
        );
        await this.multidimensionaldetailedlist(id, classId); // 多维细目表
      } catch (e) {
        console.error(e);
        this.$message.error("数据加载失败");
      }
    },
    async classIdDate(data) {
      let gradeId = this.classlistbox.filter((item) => item.classId == data)[0]
        .gradeId;
      // alert(gradeId)
      await this.performanceOverview(this.examId, data); //成绩概览
      await this.objectiveQuestion(this.examId, data); //客观题
      await this.subjectiveQuestion(this.examId, data); //主观题
      await this.errorquestion(this.examId, data); //高频错题
      await this.twoFiveRate(
        this.examId,
        data,
        gradeId,
        this.$route.query.subjectId
      );
      await this.multidimensionaldetailedlist(this.examId, data); //多维细目表
    },
    stratrateinput(val) {
      // 1. 去掉非法字符（只保留数字和 %）
      let value = val.replace(/[^0-9%]/g, "");
      // 2. 去掉多余的 %
      const percentCount = (value.match(/%/g) || []).length;
      if (percentCount > 1) {
        value = value.replace(/%/g, "") + "%";
      }
      // 3. 保证 % 在末尾
      if (value.includes("%") && !value.endsWith("%")) {
        value = value.replace(/%/g, "") + "%";
      }
      // 4. 限制数值范围 0-100
      let num = parseInt(value, 10);
      if (isNaN(num)) {
        value = ""; // 纯 %
      } else if (num > 100) {
        value = "100%";
      } else {
        value = num + (value.includes("%") ? "%" : "");
      }
      this.startRate = value; // 直接同步到数据
    },

    // 结束得分率输入处理（同上）
    endrateinput(val) {
      let value = val.replace(/[^0-9%]/g, "");
      const percentCount = (value.match(/%/g) || []).length;
      if (percentCount > 1) {
        value = value.replace(/%/g, "") + "%";
      }
      if (value.includes("%") && !value.endsWith("%")) {
        value = value.replace(/%/g, "") + "%";
      }
      let num = parseInt(value, 10);
      if (isNaN(num)) {
        value = "";
      } else if (num > 100) {
        value = "100%";
      } else {
        value = num + (value.includes("%") ? "%" : "");
      }
      this.endRate = value;
    },
    async startratechange(val) {
      const newStartRate = Number(val.replace("%", ""));
      const endRate = Number(this.endRate.replace("%", ""));

      console.info("newStartRate", newStartRate);
      console.info("endRate", endRate);

      if (newStartRate > endRate) {
        this.$message.warning("开始得分率不能超出结束得分率");
        return false;
      }
      this.startRate = val;
      await this.errorquestion(this.examId, this.classId);
    },
    async endratechange(val) {
      const start = Number(this.startRate.replace("%", ""));
      const newEnd = Number(val.replace("%", ""));

      console.info("start", start);
      console.info("newEnd", newEnd);

      if (newEnd < start) {
        this.$message.warning("结束得分率不能小于开始得分率");
        return false;
      }
      this.endRate = val;
      await this.errorquestion(this.examId, this.classId);
    },
    //高频错题数据
    async errorquestion(examId, classId) {
      this.loadingErrorQuestions = true;
      await getanalysis(
        `api/score/error-questions/${examId}?classId=${classId}&startRate=${this.startRate.replace(
          "%",
          ""
        )}&endRate=${this.endRate.replace("%", "")}`
      )
        .then((res) => {
          if (res.code == 200) {
            this.loadingErrorQuestions = false;
            res.data.forEach((item) => {
              // 初始化三个数组来存储不同类型的名单
              item.errorlistname = [];
              item.correctlistname = [];
              item.dimidiatelistname = [];

              // 遍历 rights 数组
              item.answerRight.rights.forEach((right) => {
                const students = right.studentList.join(", "); // 将学生名字用逗号连接成一个字符串
                switch (right.isRight) {
                  case "0": // 错误
                    item.errorlistname.push(students); // 将字符串添加到 errorlistname
                    break;
                  case "1": // 正确
                    item.correctlistname.push(students); // 将字符串添加到 correctlistname
                    break;
                  case "2": // 半对
                    item.dimidiatelistname.push(students); // 将字符串添加到 dimidiatelistname
                    break;
                  default:
                    break;
                }
              });

              // 将数组中的字符串用逗号连接成一个完整的字符串
              item.errorlistname = item.errorlistname.join(", ");
              item.correctlistname = item.correctlistname.join(", ");
              item.dimidiatelistname = item.dimidiatelistname.join(", ");
            });
            this.errorQuestions = res.data || [];
            console.info("this.errorQuestions", this.errorQuestions);
            if (this.errorQuestions.length === 0) {
              this.errorQuestionsError = `暂无得分率低于${this.errorQuestionRate}%的题目`;
            }
            const newItem = {
              mark: "高频错题",
              overviewData: this.errorQuestions,
              id: "gaopincuoti",
            };

            // 查找是否已经存在 mark 为“高频错题”的索引
            const idx = this.listDraglist.findIndex(
              (v) => v.mark === "高频错题"
            );

            if (idx > -1) {
              // 已存在 → 直接替换
              this.$set(this.listDraglist, idx, newItem);
            } else {
              // 不存在 → 追加
              this.listDraglist.push(newItem);
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {
          this.loadingErrorQuestions = false;
        });
    },
    //高频错题
    derivedExcel() {
      const data = [
        [
          "题号",
          "题型",
          "知识点",
          "班正答率/班得分率",
          "全体正答率/全体得分率",
          "全对学生",
          "半对学生",
          "错误学生",
        ],
      ];
      this.errorQuestions.map((item) => {
        let arr = [];
        arr.push(item.questionNum);
        arr.push(item.questionTypeName);
        arr.push(item.knowledge);
        arr.push(this.formatNumber(item.scoreRate) + "%");
        arr.push(this.formatNumber(item.examScoreRate) + "%");
        arr.push(item.correctlistname);
        arr.push(item.dimidiatelistname);
        arr.push(item.errorlistname);
        data.push(arr);
      });
      // 动态计算每列最大宽度（按字符数）
      const colWidths = data[0].map((_, colIndex) => {
        return Math.max(
          ...data.map((row) => {
            const cellValue = row[colIndex] || "";
            return typeof cellValue === "string"
              ? cellValue.toString().length * 1.8 // 中文系数
              : 10; // 默认宽度
          }),
          15 // 最小宽度
        );
      });

      const ws = XLSX.utils.aoa_to_sheet(data);
      ws["!cols"] = colWidths.map((w) => ({ wch: w })); // 设置列宽

      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "高频错题"); // 修正工作表名
      XLSX.writeFile(wb, "高频错题.xlsx"); // 直接导出文件
    },
    // 两分五率
    async twoFiveRate(examId, classId, gradeId, subjectId) {
      let obj = {
        classId,
        examId,
        gradeId,
        subjectId,
        teacherId: this.teacherInfo.teacherId,
      };
      await postanalysis("api/score/score-rates", obj).then((res) => {
        if (res.code == 200) {
          this.scoreRateData = res.data;
          const keys = [
            "fullScoreRate",
            "excellentRate",
            "goodRate",
            "passRate",
            "lowRate",
          ];
          // 一行转换
          const series = keys.map((k) => ({
            name: {
              fullScoreRate: "满分占比",
              excellentRate: "优秀占比",
              goodRate: "良好占比",
              passRate: "及格占比",
              lowRate: "低分占比",
            }[k],
            type: "bar",
            data: res.data.map((item) => parseFloat(item[k])), // 去掉 % 号并转成数字
          }));
          this.series = series;
          //   this.initChart(series);
          setTimeout(() => {
            this.initChart()
          }, 500);
          let newItem = {
            mark: "两分五率",
            overviewData: this.scoreRateData,
            id: "liangfenwulv",
          };
          const idx = this.listDraglist.findIndex((v) => v.mark === "两分五率");
          if (idx > -1) {
            // 已存在 → 直接替换
            this.$set(this.listDraglist, idx, newItem);
          } else {
            // 不存在 → 追加
            this.listDraglist.push(newItem);
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    tubiaolist(val) {
      if (val == 2) {
        this.$nextTick(() => this.initChart());
      }
    },
    initChart() {
      this.$nextTick(() => {
        this.listDraglist.forEach((_, i) => {
          if (this.$refs[`chartRef${i}`]) {
            const dom = this.$refs[`chartRef${i}`]; // 可能是数组
            const el = Array.isArray(dom) ? dom[0] : dom;
            const option = {
              color: ["#29CE67", "#A777FF", "#4985FF", "#FFAB77", "#FF7777"],
              tooltip: {
                trigger: "axis",
                axisPointer: { type: "shadow" },
              },
              legend: { show: false },
              xAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
                max: 100,
              },
              yAxis: {
                type: "category",
                data: ["全体占比", "班级占比"],
              },
              series: this.series,
            };
            const chart = echarts.init(el);
            chart.setOption(option);
          }
        });
      });
    },
    // 多维细目表
    async multidimensionaldetailedlist(examId, classId) {
      await getanalysis(
        `api/score/question-matrix/${examId}?classId=${classId}`
      )
        .then((res) => {
          console.info(res, "res");
          if (res.code == 200) {
            this.matrixData = res.data;
            let obj = {
              mark: "多维细目表",
              overviewData: this.matrixData,
              id: "duoweiximubiao",
            };
            this.listDraglist.push(obj);
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {});
    },
    getDifficultyClass(difficulty) {
      switch (difficulty) {
        case "简单":
          return "green";
        case "较易":
          return "zs";
        case "一般":
          return "blue";
        case "困难":
          return "yellow";
        default:
          return "red";
      }
    },
    sureadddata() {
      for (const row of this.editform) {
        if (row.startScore === null || row.endScore === null) {
          this.$message.warning("请先填写完整分数区间");
          return;
        }
      }
      // 2. 区间合法性校验
      const invalid = this.editform.find(
        (row) => Number(row.startScore) > Number(row.endScore)
      );
      if (invalid) {
        this.$message.warning(
          `“${invalid.name || ""}”开始分数不能大于结束分数`
        );
        return;
      }
      let obj = {
        teacherId: this.teacherInfo.teacherId,
        levelJson: this.editform,
      };
      postanalysis(`api/class/save/specialtyLevel`, obj).then((res) => {
        console.info("ressssss");
        if (res.code == 200) {
          this.scoreishow = false;
          this.twoFiveRate(
            this.$route.query.examId,
            this.$route.query.classId,
            this.$route.query.gradeid,
            this.$route.query.subjectid
          );
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 计算元素距离页面顶部的绝对高度
    getOffsetTop() {
      this.$nextTick(() => {
        const el = this.$refs.leftPanel;
        if (!el) return;
        let top = 0;
        let cur = el;
        while (cur) {
          top += cur.offsetTop;
          cur = cur.offsetParent;
        }
        this.offsetTop = top;
      });
    },
    // 滚动监听
    handleScroll() {
      // 1. 拿到当前 div
      const box = this.$refs.scrollBox; // Vue
      // const box = this.selectComponent('#scrollBox');  // 小程序 selectComponent
      // 2. 当前 div 的滚动距离
      const scrollTop = box.scrollTop;
      // 3. 判断是否要吸顶（距离顶部多少 px）
      this.isFixed = scrollTop >= this.offsetTop;
    },
    goAnchor(id,mark) {
      this.activeId = mark
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
  computed: {
    ...mapGetters(["getScreenWidth"]),
    screenWidth() {
      return this.getScreenWidth;
    },
  },
  components: { navTop, titleTab, Expandable, draggable },
};
</script>

<style scoped>
.contentzw {
  margin: 10px auto 0;
  display: flex;
  justify-content: space-between;
}
.contentzwLeft {
  box-sizing: border-box;
  width: 184px;
  background: #fff;
}
.contentzwLeft span {
  display: block;
  font-size: 12px;
  color: #b3b8c2;
  text-align: center;
  padding: 14px 0 14px;
  border-bottom: solid 1px #f5f6f8;
  margin: 0 14px;
}
.contentzwLeft div.dragli {
  box-sizing: border-box;
  height: 42px;
  padding: 0 20px 0 34px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
  line-height: 42px;
  font-size: 14px;
  background: url(../../assets/image/fenxi/drag.png) no-repeat 20px center;
  background-size: 6px 14px;
}
.contentzwLeft div.dragli:hover,
.contentzwLeft div.dragli.hover {
  color: #fff;
  background: #1a48db url(../../assets/image/fenxi/drag1.png) no-repeat 20px
    center;
  background-size: 6px 14px;
}
.contentzwRight {
  box-sizing: border-box;
  width: calc(100% - 195px);
  background: #fff;
  padding: 20px;
}
.marginTope {
  margin-bottom: 30px;
}
.homeworkgl {
  font-size: 14px;
  padding: 20px 24px;
  background: #fafafb url(../../assets/image/fenxi/bj.png) no-repeat right
    bottom;
  background-size: 151px 85px;
  color: #5b6371;
  line-height: 24px;
  letter-spacing: 0.8px;
}
.homeworkgl h3 {
  padding-bottom: 10px;
  color: #2a303b;
  font-weight: 500;
}
.homeworkgl span {
  color: #1a48db;
  cursor: pointer;
}
.homeworkgl span:hover {
  text-decoration: underline;
}
.homeworkgl b {
  color: #1a48db;
  font-weight: normal;
}
.subobjquestion {
  display: flex;
  justify-content: space-between;
  /* padding-top: 30px; */
  margin-bottom: 10px;
}
.subobjquestionTitle {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  color: #2a303b;
  background: url(../../assets/image/fenxi/title.png) no-repeat left center;
  background-size: 12px 8px;
  padding-left: 20px;
}
.subobjquestionTitle div {
  margin-left: 40px;
}
.subobjquestionTitle b {
  font-size: 12px;
  display: inline-block;
  margin-left: 20px;
  color: #1a48db;
  cursor: pointer;
}
.subobjquestion span {
  display: inline-block;
  width: 68px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  background: #e8f3ff;
  color: #1a48db;
}
>>> .el-card__body,
.el-main {
  padding: 0;
}
.studentanswer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.studentanswer li {
  background: rgb(242, 244, 251);
  border: solid 1px rgb(216, 225, 255);
  height: 22px;
  font-size: 14px;
  color: #1a48db;
  padding: 0 10px;
  line-height: 22px;
  margin: 4px 7px;
}
.studentanswer li.hover {
  background: rgb(250, 243, 245);
  border: solid 1px rgb(247, 212, 215);
  color: #ec555a;
}
.screeningScope {
  color: #5b6371;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.screeningScope div {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.screeningScope div >>> .el-input {
  width: 50px;
  height: 22px;
  text-align: center;
  padding: 0;
  margin: 0;
}
.screeningScope div >>> .el-input__inner {
  padding: 0;
  height: 30px;
  text-align: center;
  border-radius: 0px;
  border: 1px solid #dee1e7;
  color: #1a48db;
}
.screeningScope div i {
  display: inline-block;
  padding: 0 5px;
  font-style: normal;
}
.lengthTitle {
  display: flex;
  justify-content: right;
  position: relative;
  top: 20px;
}
.lengthTitle li {
  font-size: 12px;
  color: #2c3542a6;
  letter-spacing: -0.22px;
  position: relative;
  padding-left: 15px;
  margin-left: 15px;
}
.lengthTitle li::before {
  content: "";
  width: 10px;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.lengthTitle li:nth-child(1)::before {
  background: #29ce67;
}
.lengthTitle li:nth-child(2)::before {
  background: #a777ff;
}
.lengthTitle li:nth-child(3)::before {
  background: #4985ff;
}
.lengthTitle li:nth-child(4)::before {
  background: #ffab77;
}
.lengthTitle li:nth-child(5)::before {
  background: #ff7777;
}
.tabbox {
  display: inline-block;
  width: 60px;
  height: 22px;
  border-radius: 10px;
}
.green {
  /* background: rgb(225, 248, 233);
  border: 1px solid #29ce67; */
  color: #29ce67;
}
.zs {
  /* background: rgb(242, 236, 255);
  border: 1px solid rgb(224, 209, 255); */
  color: #a777ff;
}
.blue {
  /* background: rgb(229, 238, 255);
  border: 1px solid rgb(167, 196, 254); */
  color: #4985ff;
}
.yellow {
  /* background: rgb(255, 243, 236);
  border: 1px solid rgb(255, 211, 181); */
  color: #ffab77;
}
.red {
  /* background: rgb(255, 236, 236);
  border: 1px solid rgb(255, 189, 189); */
  color: #ff7777;
}
.rightlset {
  display: flex;
  align-items: center;
}
>>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #ffffff;
  border-color: #1a48db;
  color: #1a48db;
}
>>> .el-radio-button:first-child .el-radio-button__inner,
>>> .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0;
}
>>> .el-radio-button--mini .el-radio-button__inner {
  padding: 8px 15px;
  color: #b3b8c2;
}
.subobjquestion span.exportExcel {
  display: inline-block;
  width: 94px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #dee1e7;
  background: url(../../assets/image/fenxi/export.png) no-repeat 10px center;
  background-size: 14px 14px;
  box-sizing: border-box;
  padding-left: 20px;
  line-height: 30px;
  color: #b3b8c2;
  border-radius: 0;
  margin-left: 24px;
}
.subobjquestion span.exportExcel:hover,
.subobjquestion span.exportExcel.hover {
  color: #fff;
  background: #1a48db url(../../assets/image/fenxi/export1.png) no-repeat 10px
    center;
  background-size: 14px 14px;
  border: solid 1px #1a48db;
}

.subobjquestion span.exportExcel1 {
  display: inline-block;
  width: 122px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #dee1e7;
  background: url(../../assets/image/fenxi/edit.png) no-repeat 10px center;
  background-size: 14px 14px;
  box-sizing: border-box;
  padding-left: 20px;
  line-height: 30px;
  color: #b3b8c2;
  border-radius: 0;
  margin-left: 24px;
}
.subobjquestion span.exportExcel1:hover,
.subobjquestion span.exportExcel1.hover {
  color: #fff;
  background: #1a48db url(../../assets/image/fenxi/edit1.png) no-repeat 10px
    center;
  background-size: 14px 14px;
  border: solid 1px #1a48db;
}
.notuploadStudent {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 100;
}

.notuploadStudentContent {
  width: 600px;
  max-height: 500px;
  background: #ffffff;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.notuploadStudentContent h3 {
  font-size: 18px;
  color: #2a303b;
}

.contentset {
  font-size: 16px;
  color: #5b6371;
  padding: 20px 0;
  max-height: 300px;
  overflow-y: auto;
}

/* 优化后的分段显示样式 */
.class-section {
  margin-bottom: 20px;
}

.class-title {
  font-weight: bold;
  color: #2a303b;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e8f0fa;
}

.student-groups {
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
}
.student-groups .student-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6px;
  line-height: 1.6;
}
.student-name {
  display: inline-block;
  margin-right: 5px;
}
.elbuttonbox {
  display: flex;
  align-items: center;
}
.elbuttonbox >>> .el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px 10px 10px 10px;
  padding: 0;
  background: #1a48db;
  border: solid 1px #1a48db;
}
.Generatecomparativeanalysis {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 1112;
}
.GeneratecomparativeanalysisContent {
  background: #fff;
  position: fixed;
  width: 325px;
  padding: 30px;
  left: 50%;
  top: 50%;
  z-index: 113;
  transform: translate(-50%, -50%);
}
.GeneratecomparativeanalysisContent h3 {
  font-size: 18px;
  font-weight: normal;
  padding-bottom: 20px;
}
.GeneratecomparativeanalysisContent >>> .el-input__inner {
  height: 34px;
}
.GeneratecomparativeanalysisContent >>> .el-input__icon {
  line-height: 34px;
}
.neirongtable ul:first-child {
  background: #d8e4f0;
  height: 36px;
}
.neirongtable ul {
  display: flex;
  align-items: center;
  font-size: 14px;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
}
.neirongtable ul li {
  height: 34px;
  text-align: center;
  border-left: solid 1px rgba(216, 228, 240, 0.34);
  border-bottom: solid 1px rgba(216, 228, 240, 0.34);
  line-height: 34px;
  padding: 8px 0;
}
.neirongtable ul:first-child li {
  padding: 0;
}
.neirongtable ul li:nth-child(1) {
  width: 120px;
}
.neirongtable ul li:nth-child(2) {
  width: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.neirongtable ul li >>> .el-input__inner {
  width: 64px;
  padding: 0;
  text-align: center;
  height: 22px;
  line-height: 22px;
}
.neirongtable ul li em {
  display: flex;
  font-style: normal;
  color: #295cff;
  margin: 0 8px;
  cursor: pointer;
}
.neirongtable ul li em:first-child {
  color: #ec555a;
}
.neirongtable ul li span {
  display: inline-block;
  width: 48px;
  height: 22px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}
.spangreen {
  border: 1px solid #29ce67;
  color: #29ce67;
}
.spanpupor {
  border: 1px solid #a777ff;
  color: #a777ff;
}
.spanblue {
  border: 1px solid #4985ff;
  color: #4985ff;
}
.spanyellow {
  border: 1px solid #ffab77;
  color: #ffab77;
}
.spanred {
  border: 1px solid #ff7777;
  color: #ff7777;
}
.buttonbox {
  padding-top: 15px;
  display: flex;
  justify-content: left;
}
.buttonbox em {
  display: inline-block;
  width: 96px;
  height: 34px;
  background: #1a48db;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
  border: 1px solid #1a48db;
}
.buttonbox em:first-child {
  background: #f2f6fb;
  border: 1px solid #1a48db;
  color: #1a48db;
  margin-right: 24px;
}
.fixed {
  position: fixed;
  top: 0;
  z-index: 999;
  /* 宽度需要保持与原来一致，可根据父级宽度自行调整 */
  width: 184px;
}
>>> .el-table td.el-table__cell div,
>>> .el-table th.el-table__cell > .cell {
  text-align: center;
}
.scorlle-analysis {
  height: 98vh;
  overflow-y: auto;
}
.el-backtop {
  width: 100px;
  background: #295cff;
  color: #fff;
  border-radius: 0;
}
.el-backtop:hover {
  background: #295cff;
  color: #fff;
}
</style>
